
<template>
  <div class="homePage">
    <div class="container_homepage">
      <div class="homePageTop">
        <HomePage :fatherMessage="fatherMessage"></HomePage>
      </div>
      <div class="container">
        <div class="homePageCenter">
          <img src="../../assets/images/yky.png" alt="" />
          <div class="inputText">
            <div class="leftInput">
              <div
                style="
                  font-size: 20px;
                  display: flex;
                  height: 64px;
                  line-height: 64px;
                  align-items: center;
                  margin-left: 26px;
                "
              >
                <!-- 由于SVG图标默认不携带任何属性 -->
                <!-- 你需要直接提供它们 -->
                <Search style="width: 1em; height: 1em; margin-right: 8px" />
                <el-input
                  class="el_input"
                  v-model="input"
                  placeholder="请输入内容"
                  style="border: none; width: 100%"
                />
              </div>
            </div>
            <div class="rightBtn" @click="atonce()" @keydown="atonce()">
              立即搜索
            </div>
          </div>
        </div>
      </div>
      <div class="homePageBottom">
        <HomePageBottom :buttomColor="buttomColor"></HomePageBottom>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { ref } from "vue";
import HomePage from "../../components/homePageTop.vue";
import HomePageBottom from "../../components/homePageBottom.vue";
const route = useRoute();
console.log(route.query.flag);
const fatherMessage = ref(route.query.flag);
const router = useRouter();

const msg = ref("首页");
const input = ref("");

const buttomColor = ref(1);

const atonce = () => {
  //这种方法可以将传参的地址隐藏起来
  // let inputMsg = JSON.parse(JSON.stringify(input.value))

  router.push({
    path: "/barter-hall",
    // state: { inputMsg },
    // params: { 'inputMsg': inputMsg }
    query: {
      inputMsg: input.value,
    },
  });
  // router.push("/barter-hall");
};
</script>


<style scoped lang="less">
.el_input {
  :deep(.el-input__wrapper) {
    box-shadow: none;
  }
}
.container_homepage {
  display: flex;
  flex-direction: column;
  height: 100%;
  // align-items: center;
  // justify-content: center;
}
.consult {
  position: absolute;
  width: 95px;
  height: 95px;
  right: 1.5%;
  top: 64%;
  border-radius: 50%;
  background: linear-gradient(270deg, #437aef 0%, #07aeef 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  img {
    height: 28px;
    width: 28px;
  }
  span {
    font-size: 13px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    margin-top: 10px;
  }
}
.homePage {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../../assets/images/dlbgc.png") no-repeat;
  background-size: 100% 100%;
  // border: 1px solid red;
  .container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;

    .homePageTop {
      height: 88px;
    }
    .homePageCenter {
      width: 673px;
      // height: 200px;
      border-radius: 0px 0px 0px 0px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      // margin: 290px auto;
      .inputText {
        width: 673px;
        height: 64px;
        line-height: 64px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-top: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        .leftInput {
          flex: 1;
          width: 561px;
          background: #ffffff;
          border-radius: 50px 0px 0px 50px;
        }
        .rightBtn {
          width: 92px;
          background: linear-gradient(270deg, #437aef 0%, #07aeef 100%);
          border-radius: 0px 50px 50px 0px;
          opacity: 1;
          font-size: 16px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          padding-left: 20px;
        }
      }
    }
  }
  .homePageBottom {
    height: 137px;
    // border: 1px solid red;
  }
}
</style>